<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* background-clip 用来设置元素的背景裁切到哪个盒子。兼容到IE9。实际用到的不多。*/
        /* background-clip的值  */
        /* border-box(背景眼神到边框 默认值)  即图片被压在边框下。*/
        /* padding-box(背景延申至padding的外边 不会绘制到边框处)（仅在dotted dashaed 边框可察觉）  图片的边刚好粘到边框的边。*/
        /* content-box(背景被裁剪到内容区) 即图片的边到padding的内边。*/
        /* 背景起源：background-origin  表示图片从哪个盒子开始走 值有border-box padding-box content-box*/
        div{
            width: 200px;
            height: 200px;
            border: 10px dashed red;
            margin-bottom: 10px;
            background-image: url(2.png);
            padding:45px;
        }
        div.box1{
            background-clip: border-box;
        }
        div.box2{
            background-clip: padding-box;
        }
        div.box3{
            background-clip: content-box;
        }
        div.box4{
            background-clip: content-box;
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>